<template>
    <div>
        <el-card class="box-card">

            <!-- 表格头 搜索栏 -->
            <div slot="header" class="clearfix">
                <el-form :inline="true" size="small" :model="formInline" class="demo-form-inline">
                    <el-form-item>
                        <el-button type="success" @click="add">添加用户</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" @click="delBatch">批量删除</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="formInline.name" placeholder="请输入查询关键字"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 表格内容 -->
            <el-table :data="users" style="width: 100%" :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="60"></el-table-column>
                <el-table-column prop="UserID" label="编号" width="60"></el-table-column>
                <el-table-column prop="Path" label="头像" width="80">
                    <template #default="{ row }">
                        <el-avatar :src="baseImg + row.Path"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="UserName" label="姓名" width="100"></el-table-column>
                <el-table-column prop="Sex" label="性别" width="60"></el-table-column>
                <el-table-column prop="Birthday" label="出生日期" width="120">
                    <template #default="{ row }">
                        {{ row.Birthday.substr(0, 10) }}
                    </template>
                </el-table-column>
                <el-table-column prop="Phone" label="手机" width="120"></el-table-column>
                <el-table-column prop="DeptName" label="部门"></el-table-column>
                <el-table-column prop="RoleName" label="角色"></el-table-column>
                <el-table-column prop="Status" label="状态">
                    <template #default="{ row }">
                        <el-switch disabled v-model="row.Status" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160">
                    <template #default="{ row }">
                        <el-button slot="reference" type="warning" size="mini" @click="edit(row)"
                            style="margin-right: 10px;">修改</el-button>

                        <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info"
                            @confirm="del(row.UserID)" icon-color="red" :title="'确定删除“' + row.UserName + '”?'">
                            <el-button slot="reference" type="danger" size="mini">删除</el-button>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination style="margin-top: 10px;" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page="page" :page-sizes="[5, 10, 20, 50]"
                :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>

        <!-- 添加用户弹窗 -->
        <el-dialog title="添加用户" center :visible.sync="dialogCreateVisible">
            <create :dialogVisible.sync="dialogCreateVisible" @refresh="selelct"></create>
        </el-dialog>

        <!-- 修改用户弹窗 -->
        <el-dialog title="修改用户" center :visible.sync="dialogEditVisible">
            <edit :dialogVisible.sync="dialogEditVisible" :data="editForm" @refresh="selelct"></edit>
        </el-dialog>

    </div>
</template>

<script>

import basePath from '../../../plugins/base'
import create from './Create.vue'
import edit from './Edit.vue'


export default {
    name: 'usersview',
    data() {
        return {
            baseImg: '',
            formInline: {
                name: ''
            },

            //列表 分页相关
            page: 1,
            size: 5,
            total: 0,
            users: [],

            //修改相关数据
            editForm: {
                UserID: 0,
                UserName: "",
                Sex: "",
                Birthday: '',
                ImgID: 0,
                RoleID: 0,
                Phone: "",
                LoginName: "",
                LoginPwd: "",
                Status: true
            },

            //弹窗控制
            dialogCreateVisible: false,
            dialogEditVisible: false,

            //多选的值
            multipleSelection: [],
        }
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },

        //查询
        selelct() {
            //axios 请求获取后端 api 的数据
            this.axios({
                method: 'get',
                url: 'Users',
                params: { page: this.page, limit: this.size, name: this.formInline.name }, //get 请求的参数
                data: {}    //post 请求的参数
            }).then(res => {
                //console.log('users: ', res.data);
                this.total = res.count;
                this.users = res.data;

            }).catch(err => {
                console.log('err: ', err);
            })
        },

        //切换每页条数
        handleSizeChange(val) {
            this.size = val;
            this.selelct();
        },
        //翻页
        handleCurrentChange(val) {
            this.page = val;
            this.selelct();
        },

        //搜索
        onSearch() {
            this.selelct();
        },

        //添加用户弹窗
        add() {
            this.dialogCreateVisible = true;
        },

        //修改数据弹窗并传值
        edit(row) {
            this.editForm = JSON.parse(JSON.stringify(row));
            this.dialogEditVisible = true;
        },

        //行内删除
        del(id) {
            this.axios({
                method: 'delete',
                url: 'users',
                params: { id: id }
            }).then(res => {
                if (res.code == 1) {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                    //刷新数据
                    this.selelct();

                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    })
                }
            }).catch(err => {
                console.log('err: ', err);
            })
        },

        //多选选中处理
        handleSelectionChange(val) {
            //console.log('val: ', val);
            this.multipleSelection = val;
        },
        // 批量删除
        delBatch() {
            let ids = [];
            let names = [];
            this.multipleSelection.forEach(v => {
                ids.push(v.UserID);
                names.push(v.UserName);
            })
            if (ids.length == 0) {
                this.$message('请选择需要删除的项！')
                return;
            }
            this.$confirm('确实删除【' + names + '】?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios({
                    method: 'delete',
                    url: 'users/batch',
                    //params: { ids: ids },
                    data:ids
                }).then(res => {
                    //console.log('res: ', res);
                    //判断是否操作成功
                    if (res.code == 1) {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        })
                        //刷新数据
                        this.selelct();

                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }

                }).catch(err => {
                    console.log('err: ', err);
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });


        }
    },
    created() {
        this.selelct();
        this.baseImg = basePath.imgUrl;
    },
    //注册组件
    components: {
        create, edit
    }
}
</script>

<style>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.el-form-item--small.el-form-item {
    margin-bottom: 0px;
}
</style>